<template>
    <div class="editor-bottom">
      <div class="left">
        <a-popover trigger="hover" v-model:visible="scaleVisible" placement="top"
            overlayClassName="canvasToolright_handler">
            <template #content >
                <div class="percent">
                <dd @click="setCanvasPercentage(30)">30%</dd>
                <dd @click="setCanvasPercentage(50)">50%</dd>
                <dd @click="setCanvasPercentage(70)">70%</dd>
                <dd @click="setCanvasPercentage(90)">90%</dd>
                <dd @click="setCanvasPercentage(100)">100%</dd>
                </div>
            </template>
            <dl>{{canvasPercentage}}%</dl>
        </a-popover>
      </div>
      <div class="right">
            <div class="flex">
                <i class="appIcon-iconfont iconsuoxiao viewport-size" @click="scaleCanvas('-')"></i>
                <i class="appIcon-iconfont iconfangda viewport-size" @click="scaleCanvas('+')"></i>
                <!-- <IconFullScreen class="viewport-size" @click="setCanvasPercentage(90)" /> -->
            </div>
      </div>
    </div>
</template>
<script lang="ts" setup>
import { useMainStore } from '@/store'
import { computed, defineComponent, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import useScaleCanvas from '@/hooks/useScaleCanvas'

const scaleVisible = ref<boolean>(false)
const mainStore = useMainStore()
const { scaleCanvas, setCanvasPercentage } = useScaleCanvas()
const { currentTab,canvasScale, canvasPercentage } = storeToRefs(mainStore)
const canvasScalePercentage = computed(() => parseInt(canvasScale.value * 100 + '') + '%')
const percentage = ref(canvasScalePercentage.value)


</script>
<style lang="scss">
.percent {
        dd {
            line-height: 30px;
            cursor: pointer;
        }
    }
</style>
<style lang="scss" scoped>

.flex {
  display: flex;
  .viewport-size {
    padding: 0 20px;
    cursor: pointer;
  }
}
.editor-bottom {
    display: flex;
    justify-content: space-between;
    .left {
        padding-left: 10px;
        overflow: hidden;
        cursor: pointer;
        dd {
            cursor: pointer;
            font-size: 14px;
            line-height: 28px;
        }
        dl {
            font-size: 12px;
            line-height: 20px;
            color: #fff;
        }
        .text {
            color: #fff;
            font-size: 12px;
        }
    }
    .right {
        color: #fff;
        i {
            font-size: 12px;
            line-height: 20px;
        }
    }
}
</style>